<template>
	<el-card>
		<el-form :inline="true" :model="queryParams" label-width="88px">
			<el-form-item label="电商" prop="supplierId">
				<el-select size="small" v-model="queryParams.supplierId" placeholder="请选择一个电商" filterable clearable>
					<el-option v-for="item in suppliers" :key="item.id" :label="item.name" :value="item.supplier">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="sku" prop="sku">
				<el-input v-model="queryParams.sku" placeholder="sku" clearable size="small" clearable
					@keyup.enter.native="handleSearch" />
			</el-form-item>
			<el-form-item>
				<el-button type="danger" icon="el-icon-search" size="mini"
					@click="handelCallSupplierApi('handleCheckPrice')">价格接口检测</el-button>
				<el-button type="danger" icon="el-icon-search" size="mini"
					@click="handelCallSupplierApi('handleCheckStocks')">库存接口检测</el-button>
				<el-button type="danger" icon="el-icon-search" size="mini"
					@click="handelCallSupplierApi('handleCheckGoodsDetail')">商品详情检测</el-button>
			</el-form-item>
		</el-form>
		<el-divider></el-divider>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card>
					<div slot="header">
						<span>调用电商<em class="title-message">价格</em>接口返回的数据</span>
						<el-button type="text danger" class="change-show" icon="el-icon-delete" @click="cleanData('handleCheckPrice')"></el-button>
						<el-switch v-model="api.handleCheckPrice.show" class="change-show" active-color="#ff4949"
							inactive-color="#909399">
						</el-switch>
					</div>
					<div v-if="!api.handleCheckPrice.show || checkObject(api.handleCheckPrice.res1, '{}')"
						class="body data_info" v-html="api.handleCheckPrice.res">
					</div>
					<div v-else class="body">
						<el-row :gutter="10">
							<el-col :span="12">电商：{{ api.handleCheckPrice.supplier }}</el-col>
							<el-col :span="12">sku：{{ api.handleCheckPrice.sku }}</el-col>
						</el-row>
						<el-divider></el-divider>
						<el-row :gutter="10">
							<el-col :span="12">调用结果：{{ api.handleCheckPrice.res1.success ? "成功" : "失败" }}</el-col>
							<el-col :span="12"></el-col>
						</el-row>
						<template v-if="api.handleCheckPrice.res1.success ">
							<el-row :gutter="10">
								<el-col :span="12">协议未税价：{{ api.handleCheckPrice.res1.result[0].exclude_tax_price }}
								</el-col>
								<el-col :span="12">协议含税价：{{ api.handleCheckPrice.res1.result[0].price }}</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="12">官网价格：{{ api.handleCheckPrice.res1.result[0].mall_price }}</el-col>
								<el-col :span="12">税率：{{ api.handleCheckPrice.res1.result[0].tax_rate }}</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="12">市场价：{{ api.handleCheckPrice.res1.result[0].market_price }}</el-col>
								<el-col :span="12"></el-col>
							</el-row>
						</template>
						<template v-else>
							<el-row :gutter="10">
								<el-col :span="24">失败原因：{{ api.handleCheckPrice.res1.desc || api.handleCheckStocks.res1.resultmessage }}</el-col>
							</el-row>
						</template>
					</div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<div slot="header">
						<span>调用电商<em class="title-message">库存</em>接口返回的数据</span>
						<el-button type="text danger" class="change-show" icon="el-icon-delete" @click="cleanData('handleCheckStocks')"></el-button>
						<el-switch class="change-show" v-model="api.handleCheckStocks.show" active-color="#ff4949"
							inactive-color="#909399">
						</el-switch>
					</div>
					<div v-if="!api.handleCheckStocks.show || checkObject(api.handleCheckStocks.res1, '{}')"
						class="body data_info" v-html="api.handleCheckStocks.res">
					</div>
					<div v-else class="body">
						<el-row :gutter="10">
							<el-col :span="12">电商：{{ api.handleCheckStocks.supplier }}</el-col>
							<el-col :span="12">sku：{{ api.handleCheckStocks.sku }}</el-col>
						</el-row>
						<el-divider></el-divider>
						<el-row :gutter="10">
							<el-col :span="12">调用结果：{{ api.handleCheckStocks.res1.success ? "成功" : "失败" }}</el-col>
							<el-col :span="12"></el-col>
						</el-row>
						<template v-if="api.handleCheckStocks.res1.success ">
							<el-row :gutter="10">
								<el-col :span="12">状态：{{ api.handleCheckStocks.res1.result[0].desc }}</el-col>
								<el-col :span="12">库存：{{ api.handleCheckStocks.res1.result[0].num }}</el-col>
							</el-row>
						</template>
						<template v-else>
							<el-row :gutter="10">
								<el-col :span="24">失败原因：{{ api.handleCheckStocks.res1.desc || api.handleCheckStocks.res1.resultmessage }}</el-col>
							</el-row>
						</template>
					</div>
				</el-card>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-card>
					<div slot="header">
						<span>调用电商<em class="title-message">商品详情</em>接口返回的数据</span>
						<el-button type="text danger" class="change-show" icon="el-icon-delete" @click="cleanData('handleCheckGoodsDetail')"></el-button>
						<el-switch class="change-show" v-model="api.handleCheckGoodsDetail.show" active-color="#ff4949"
							inactive-color="#909399">
						</el-switch>
					</div>
					<div v-if="!api.handleCheckGoodsDetail.show  || checkObject(api.handleCheckGoodsDetail.res1, '{}')"
						class="body large data_info" v-html="api.handleCheckGoodsDetail.res">
					</div>
					<div v-else class="body large">
						<el-row :gutter="10">
							<el-col :span="12">电商：{{ api.handleCheckGoodsDetail.supplier }}</el-col>
							<el-col :span="12">sku：{{ api.handleCheckGoodsDetail.sku }}</el-col>
						</el-row>
						<el-divider></el-divider>
						<el-row :gutter="10">
							<el-col :span="12">调用结果：{{ api.handleCheckGoodsDetail.res1.success ? "成功" : "失败" }}</el-col>
							<el-col :span="12" v-if="api.handleCheckGoodsDetail.res1.success">电商连接：<el-link
									:href="api.handleCheckGoodsDetail.res1.result.url" target="_blank" type="danger">
									{{ api.handleCheckGoodsDetail.res1.result.url }}
								</el-link>
							</el-col>
						</el-row>
						<template v-if="api.handleCheckGoodsDetail.res1.success ">
							<el-row :gutter="10">
								<el-col :span="24">商品名称：{{ api.handleCheckGoodsDetail.res1.result.name }}</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="12">商品分类：{{ api.handleCheckGoodsDetail.res1.result.category }}</el-col>
								<el-col :span="12">品牌名：{{ api.handleCheckGoodsDetail.res1.result.brand_name }}</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="12">销售单位：{{ api.handleCheckGoodsDetail.res1.result.unit }}</el-col>
								<el-col :span="12">型号：{{ api.handleCheckGoodsDetail.res1.result.typeno }}</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="12">重量：{{ api.handleCheckGoodsDetail.res1.result.weight }}</el-col>
								<el-col :span="12">电商上架状态：{{ api.handleCheckGoodsDetail.res1.result.state }}</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="12">品牌id：{{ api.handleCheckGoodsDetail.res1.result.brand_id }}</el-col>
								<el-col :span="12">产地：{{ api.handleCheckGoodsDetail.res1.result.product_area }}</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="12">条形码：{{ api.handleCheckGoodsDetail.res1.result.upc }}</el-col>
								<el-col :span="12">包装：{{ api.handleCheckGoodsDetail.res1.result.ware }}</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="12">是否进口：{{ api.handleCheckGoodsDetail.res1.result.Imported || "非进口产品" }}
								</el-col>
								<el-col :span="12">
									特色服务产品：{{ api.handleCheckGoodsDetail.res1.result.is_cabinet || "非进口产品" }}
								</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="12">
									促销：{{ api.handleCheckGoodsDetail.res1.result.sale_actives ? '是促销产品' : '不是促销产品' }}
								</el-col>
								<el-col :span="12">预计到货时间：{{ api.handleCheckGoodsDetail.res1.result.deliveryDay }}
								</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="12">节能：{{ api.handleCheckGoodsDetail.res1.result.energy || "否" }}
								</el-col>
								<el-col :span="12">环保：{{ api.handleCheckGoodsDetail.res1.result.protection || "否" }}
								</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="12">
									节能品牌：{{ api.handleCheckGoodsDetail.res1.result.EfficientGoodsBrand || "无" }}
								</el-col>
								<el-col :span="12">
									节能型号：{{ api.handleCheckGoodsDetail.res1.result.EfficientGoodsXinhao || "无" }}
								</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="12">
									节能标志认证证书号：{{ api.handleCheckGoodsDetail.res1.result.EfficientGoodsSn || "无" }}
								</el-col>
								<el-col :span="12">
									节能认证证书有效日期：{{ api.handleCheckGoodsDetail.res1.result.EfficientGoodsExpiry || "无" }}
								</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="12">
									节能产品证书编号：{{ api.handleCheckGoodsDetail.res1.result.EfficientGoodsCardNum || "无" }}
								</el-col>
								<el-col :span="12">
									节能产品证书图片：
									<template v-if="api.handleCheckGoodsDetail.res1.result.EfficientGoodsImagePath">
										<img class="goods-image"
											:src="api.handleCheckGoodsDetail.res1.result.EfficientGoodsImagePath"
											alt="节能产品证书图片">
									</template>
									<template v-else>
										无
									</template>
								</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="24">
									节能产品证书认证机构：{{ api.handleCheckGoodsDetail.res1.result.EfficientGoodsCardOrgan || "无" }}
								</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="12">
									环保品牌：{{ api.handleCheckGoodsDetail.res1.result.EnvmFriendlyGoodsBrand || "无" }}
								</el-col>
								<el-col :span="12">
									环保型号：{{ api.handleCheckGoodsDetail.res1.result.EnvmFriendlyGoodsXinhao || "无" }}
								</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="12">
									环保标志认证证书号：{{ api.handleCheckGoodsDetail.res1.result.EnvmFriendlyGoodsSn || "无" }}
								</el-col>
								<el-col :span="12">
									环保证书有效日期：{{ api.handleCheckGoodsDetail.res1.result.EnvmFriendlyGoodsExpiry || "无" }}
								</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="12">
									环保产品证书编号：{{ api.handleCheckGoodsDetail.res1.result.EnvmFriendlyGoodsCardNum || "无" }}
								</el-col>
								<el-col :span="12">
									环保产品证书图片：
									<template v-if="api.handleCheckGoodsDetail.res1.result.EnvmFriendlyGoodsImagePath">
										<img class="goods-image"
											:src="api.handleCheckGoodsDetail.res1.result.EnvmFriendlyGoodsImagePath"
											alt="节能产品证书图片">
									</template>
									<template v-else>
										无
									</template>
								</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="24">
									环保产品证书认证机构：{{ api.handleCheckGoodsDetail.res1.result.EnvmFriendlyGoodsCardOrgan || "无" }}
								</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="24">台式计算机的配置：{{ api.handleCheckGoodsDetail.res1.result.pc_param || "无" }}
								</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="24">售后服务：{{ api.handleCheckGoodsDetail.res1.result.service || "无" }}
								</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="24">
									主要图片：
									<template v-if="api.handleCheckGoodsDetail.res1.result.image_path">
										<img class="goods-image"
											:src="api.handleCheckGoodsDetail.res1.result.image_path" alt="主要图片">
									</template>
									<template v-else>
										无
									</template>
								</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="24">基本参数：
									<div v-html="api.handleCheckGoodsDetail.res1.result.param"></div>
								</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="24">简要配置：
									{{ api.handleCheckGoodsDetail.res1.result.briefconfig || '无' }}
								</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="24">商品接口主要属性值json：
									{{ api.handleCheckGoodsDetail.res1.result.main_property_arigin || '无' }}
								</el-col>
							</el-row>
							<el-row :gutter="10">
								<el-col :span="24">商品介绍：
									<div v-html="api.handleCheckGoodsDetail.res1.result.introduction"></div>
								</el-col>
							</el-row>
						</template>
						<template v-else>
							<el-row :gutter="10">
								<el-col :span="24">失败原因：{{ api.handleCheckGoodsDetail.res1.desc || api.handleCheckStocks.res1.result }}</el-col>
							</el-row>
						</template>
					</div>
				</el-card>
			</el-col>
		</el-row>

	</el-card>
</template>

<script>
	import { getOnlineSupplierList, getGoodsPrice, getGoodsStocks, getGoodsDetail } from '@/api/supplier.api'

	export default {
		name: 'supplier-api-check',
		data() {
			return {
				suppliers: [],
				api: {
					handleCheckPrice: {
						api: getGoodsPrice,
						callback: this.formatPrice,
						supplier: "",
						sku: "",
						show: true,
						res: "暂无数据",
						res1: {}
					},
					handleCheckStocks: {
						api: getGoodsStocks,
						callback: this.formatPrice,
						supplier: "",
						sku: "",
						show: true,
						res: "暂无数据",
						res1: {}
					},
					handleCheckGoodsDetail: {
						api: getGoodsDetail,
						callback: this.formatPrice,
						supplier: "",
						sku: "",
						show: true,
						res: "暂无数据",
						res1: {}
					},
				},
				queryParams: {
					sku: '',
					supplierId: ''
				},
			}
		},
		computed: {
			supplierName() {
				for (let i = 0; i < this.suppliers.length; i++) {
					let row = this.suppliers[i];
					if (row.supplier == this.queryParams.supplierId) {
						return row.name;
					};
				}
			}
		},
		mounted() {
			this.getSupplierList();
		},
		methods: {
			/** 获取电商列表 */
			getSupplierList() {
				getOnlineSupplierList().then(res => {
					this.suppliers = res;
				})
			},
			cleanData(act) {
				this.api[act].sku = "";
				this.api[act].supplier = ""
				this.api[act].res = "暂无数据"
				this.api[act].res1 = {}
			},
			handelCallSupplierApi(act) {
				if (this.queryParams.sku == '' || this.queryParams.sku == undefined) {
					return this.$message.warning({
						message: "请输入sku"
					})
				}
				if (this.queryParams.supplierId == '' || this.queryParams.supplierId == undefined) {
					return this.$message.warning({
						message: "请选择一个电商"
					})
				}
				this.api[act].api(this.queryParams).then(res => {
					this.api[act].sku = this.queryParams.sku;
					this.api[act].supplier = this.supplierName
					const data = JSON.parse(res.msg)
					if (!data.success) {
						this.$message.error({
							message: data.desc || data.result
						})
					}else {
						if(this.checkObject(data.result, "[]")) {
							const error_message = "获取到的数据位空";
							this.$message.error({
								message: error_message
							})
							data.success = false;
							data.desc = error_message;
						}
					}
					this.api[act].callback(data, act)
				})
			},
			formatPrice(price, act) {
				this.api[act].res1 = price;
				this.api[act].res = this.pretifyJson(price, true)
			},
			pretifyJson(json, pretify = true) {
				if (typeof json !== 'string') {
					if (pretify) {
						json = JSON.stringify(json, undefined, 4);
					} else {
						json = JSON.stringify(json);
					}
				}
				return json.replace(
					/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
					function(match) {
						let cls = "<span>";
						if (/^"/.test(match)) {
							if (/:$/.test(match)) {
								cls = "<span class='key'>";
							} else {
								cls = "<span class='string'>";
							}
						} else if (/true|false/.test(match)) {
							cls = "<span class='boolean'>";
						} else if (/null/.test(match)) {
							cls = "<span class='null'>";
						}
						return cls + match + "</span>";
					}
				);
			},
			checkObject(data, p) {
				return JSON.stringify(data) == p;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	em {
		font-style: normal;

		&.title-message {
			color: var(--token-simulation-red-base-62);
			padding: 0 .25em;
		}
	}

	.body {
		height: 240px;
		overflow-y: scroll;
		overflow-x: hidden;

		&.large {
			min-height: 240px;
			height: auto;
		}
	}

	.data_info {
		width: 100%;
		font-size: 16px;
		white-space: pre-wrap;
		word-wrap: break-word;
		background-color: white;
		border: 0px;


	}

	.change-show {
		float: right;
		padding: 2px 5px 2px 0;
	}
</style>
<style lang="scss">
	.Ptable {
		border-top: 1px solid #333;
		border-left: 1px solid #333;
		border-spacing: 0;

		.tdTitle {
			width: 200px;
			background-color: #f5f5f5;
			border-right: 1px solid #333;
			border-bottom: 1px solid #333;
		}

		td {
			border-right: 1px solid #333;
			border-bottom: 1px solid #333;
			padding: 1em 0;
		}
		
	}

	.goods-image {
		width: 200px;
		border: 1px solid #eeeeee;
	}

	.string {
		color: green;
	}

	.number {
		color: darkorange;
	}

	.boolean {
		color: blue;
	}

	.null {
		color: magenta;
	}

	.key {
		color: red;
	}
</style>
